@overlay-prefix:~"w-overlay";

.@{overlay-prefix} {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  left: 0;
  outline: 0;
  bottom: 0;
  z-index: 999;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  height: 100%;
  width: 100%;
  display: none;
  &.open {
    z-index: 9999;
  }
  &-open {
    overflow: hidden;
  }
  &-content {
    position: relative;
    outline: 0;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    margin: 20px 0;
    z-index: 20;
  }
  &-inline {
    position: absolute;
    overflow: initial;
  }
  &-inline &-container {
    position: relative;
  }
  &-inline &-backdrop {
    position: absolute;
  }
  &-container {
    position: absolute;
    overflow: auto;
    z-index: 21;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    &:before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1px;
      vertical-align: middle;
    }
  }
  &-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    z-index: 20;
    background-color: rgba(16,22,26,.7);
    overflow: auto;
    user-select: none;
  }
}

.@{overlay-prefix}-enter .@{overlay-prefix}-backdrop {
  opacity: 0.01;
}

.@{overlay-prefix}-enter-active .@{overlay-prefix}-backdrop {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.@{overlay-prefix}-exit .@{overlay-prefix}-backdrop {
  opacity: 1;
}

.@{overlay-prefix}-exit-active .@{overlay-prefix}-backdrop {
  opacity: 0;
  transition: opacity 300ms ease-in;
}


.@{overlay-prefix}-enter .@{overlay-prefix}-content {
  transform: scale(.5);
  opacity: 0;
}
.@{overlay-prefix}-enter-active .@{overlay-prefix}-content {
  opacity: 1;
  transform: translate(0);
  transition: transform 300ms ease, opacity 300ms ease;
}
.@{overlay-prefix}-exit .@{overlay-prefix}-content {
  opacity: 1;
  transform: translate(0);
  transition: transform 300ms ease, opacity 300ms ease;
}
.@{overlay-prefix}-exit-active .@{overlay-prefix}-content {
  transform: scale(.5);
  opacity: 0;
}

.@{overlay-prefix}-enter,
.@{overlay-prefix}-enter-done,
.@{overlay-prefix}-exit {
  display: inherit;
}
